import { useModel } from '@umijs/max';
import { useEffect, useState } from 'react';
// import Countdown from 'antd/es/statistic/Countdown';
import { Button, Space, message, notification } from 'antd';
import * as apiDeploy from '@/services/deploy';


export const DeployConfigPublishNotification = () => {  
  const {
    deployConfigPublish, 
    setDeployConfigPublish
  } = useModel('useGlobalModel', (model) => ({
    deployConfigPublish: model.deployConfigPublish,
    setDeployConfigPublish: model.setDeployConfigPublish,
  }));
  
  // const [countdownTicks, setCountdownTicks] = useState<number>(0);
  const [apiNotify, notifyContextHolder] = notification.useNotification();
  

  const openNotification = () => {
    // const key = `open${Date.now()}`;
    const btn = (
      <Space>
      <Button type="primary" danger size="small" onClick={() => handleCancel()}>
        取消
      </Button>
        <Button type="primary" size="small" onClick={() => handlePublishConfig(false)}>
        下发修改配置
        </Button>
        {/* <Button type="primary" danger size="small" onClick={() => handlePublishConfig(true)}>
        下发全部配置
        </Button> */}
      </Space>
    );
    apiNotify.warning({
      message: '配置已修改，需下发后生效',
      // message: '配置下发',
      // description: '配置已修改，需下发后生效。',
      btn,
      // key,
      closeIcon: false,
      // onClose: handleClose,
      duration:0
    });
  };

  const handlePublishConfig = async (must: boolean) => {
    message.info('配置下发中');
    const result = await apiDeploy.publishConfig({ keys : undefined, must: must });
    if (result && result.success === true) {
      setDeployConfigPublish(false);
      handleClose();
      message.success('配置下发成功，等待处理');
    }
    else{
      message.error('配置下发失败');
    }

  };
  
  const handleCancel = () => {
    apiNotify.destroy();
    setDeployConfigPublish(false);
  }

  const handleClose = () => {
    apiNotify.destroy();
  }

  useEffect(() => {
    reload();
  }, [deployConfigPublish]);
  
  const reload = () => {
    if(deployConfigPublish == true){
      openNotification();
    }
  };

  return (
    <div
      style={{
        display: 'flex',
      }}
    >
      {notifyContextHolder}
    </div>
  );
};